<template>
    <div class="heroCenter">
        <img src="/src/assets/img/home/frontpage_hero.webp" alt=""/>
        <div class="heroText">
            <h1>SUPERCELL</h1>
            <p>
                Makers of Hay Day, Clash of Clans,<br/>Boom Beach, Clash Royale, Brawl
                <br/>Stars, Squad Busters and mo.co.
            </p>
            <button class="watchVideoBtn" @click="openVideo">WATCH VIDEO</button>
        </div>
        <!-- 遮罩和视频弹窗 -->
        <div v-if="showVideo" class="overlay" @click="closeVideo">
            <div class="video-popup" @click.stop>
                <video
                    src="/src/assets/video/index.mp4"
                    ref="videoPlayer"
                    type="video/mp4"
                    controls
                >
                </video>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";

const showVideo = ref(false);
const videoPlayer = ref(null);

const openVideo = () => {
    showVideo.value = true;
    document.body.style.overflow = "hidden";
    setTimeout(() => {
        if (videoPlayer.value) {
            videoPlayer.value.play();
        }
    }, 100);
};

const closeVideo = () => {
    showVideo.value = false;
    document.body.style.overflow = "auto";
    if (videoPlayer.value) {
        videoPlayer.value.pause();
        videoPlayer.value.currentTime = 0;
    }
};
</script>

<style scoped>
.heroCenter {
    position: relative;
}

.heroCenter img {
    height: 70vh;
    width: 100%;
    object-fit: cover;
}

.heroCenter .heroText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: black;
}

.heroCenter h1 {
    font-size: 66px;
    margin-bottom: 20px;
}

.heroCenter p {
    font-size: 18px;
    margin-bottom: 24px;
}

.watchVideoBtn {
    background-color: #2d85f3;
    color: white;
    height: 43px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.watchVideoBtn:hover {
    background-color: #1f7aeb;
}

/* 遮罩和视频弹窗样式 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-popup {
    z-index: 1001;
    width: 80%;
}

.video-popup video {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 100%;
}
</style>